// 用于仓库仓库

// 0. 引入 Vue
import Vue from "vue";
// 1. 引入 Vuex
import Vuex from "vuex";

// 引入突变类型常量
import { ADD_COUNT } from "./mutationTypes";

Vue.use(Vuex);

// 3. new Vuex.Store() 创建 仓库实例对象
const store = new Vuex.Store({
  // 5大配置

  // state - 仓库中的数据
  state: {
    count: 10,
    msg: "msg",
  },

  getters: {
    // key1: value1
    //    key1 - getter 名字
    //    value1 - 计算该getter的一个函数,需要有返回值
    //             函数会携带有  state, getters, rootState 三个参数
    doubleCount(state) {
      // state - 就是当前store的state数据
      // getters - 就是当前getters数据
      // console.log("state", state);
      // console.log("getters", getters);
      return state.count * 2;
    },

    countPlus(state) {
      return state.count + 1;
    },

    doubleCountPlus(state, getters) {
      // return state.count * 2 + 1
      return getters.doubleCount + 1;
    },
  },

  mutations: {
    // key1: value1
    //  key1 - 突变的名字（类型）
    //  value1 - 是突变的处理逻辑，是一个函数，该函数不要有异步的代码，
    //           该函数会接收到两个参数   state, payload
    changeCount(state, payload) {
      // debugger;
      // state 是当前的 state 数据
      // payload 是 提交这个突变时传递过来的参数
      //      commit(type, payload)
      state.count = payload;
    },
    [ADD_COUNT](state) {
      state.count++;
    },
    changeMsg(state, payload) {
      state.msg = payload;
    },
  },

  actions: {
    // key1: value1
    //    key1 - aciton type 动作类型（名字）
    //    value1 - action 的处理逻辑，是个函数，该函数可以有异步代码（比如调用后端接口）
    //            该函数，接受的参数是：    context, payload
    hello(context, payload) {
      // context 指上下文对象，在这儿可以简单的理解为是一个 store 的实例对象
      //    - state
      //    - getters
      //    - commit()
      //    - dispatch()
      // payload - 派发该动作时，传递过来的参数
      //      this.$store.dispatch(type, payload)
      console.log("hello context", context);
      console.log("hello payload", payload);
      // 要修改 state.msg 为 payload, 通过调用 context.commit() 来触发一个突变。
      context.commit("changeMsg", payload);
    },
  },
});

// 4. 导出 store 给其他文件使用
export default store;
